<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!--
  ========================================================================
  EXCLUSIVE ON themeforest.net
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  Template Name   : ZTIO.NET
  Author          : mital_04
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  Copyright (c) 2018 - mital_04
  ========================================================================
  -->
  <!-- Page Title -->
  <title>ZTIO.NET - App Landing Page</title>
  <!-- / -->

  <!---Font Icon-->
  <link href="static/plugin/font-awesome/css/fontawesome-all.min.css" rel="stylesheet">
  <link href="static/plugin/themify-icons/themify-icons.css" rel="stylesheet">
  <!-- / -->

  <!-- Plugin CSS -->
  <link href="static/plugin/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="static/plugin/owl-carousel/css/owl.carousel.min.css" rel="stylesheet">
  <!-- / -->

  <!-- Theme Style -->
  <link href="static/css/styles.css" rel="stylesheet">
  <link href="static/css/color/default.css" rel="stylesheet" id="color_theme">
  <!-- / -->

  <!-- Favicon -->
  <link rel="icon" href="favicon.ico" />
  <!-- / -->
</head>

<!-- Body Start -->
<body data-spy="scroll" data-target="#navbar" data-offset="98">

  <!-- Loading -->
  <div id="loading">
    <div class="load-circle"><span class="one"></span></div>
  </div>
  <!-- / -->


    <!-- Header -->
  <header>
    <nav class="navbar header-nav header-nav-light fixed-top navbar-expand-lg">
      <div class="container">
        <!-- Brand -->
        <a class="navbar-brand" href="index.html#">ZTIO.NET<span class="theme-bg"></span> </a>
        <!-- / -->

        <!-- Mobile Toggle -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
            <span></span>
            <span></span>
            <span></span>
        </button>
        <!-- / -->

        <!-- Top Menu -->
        <div class="collapse navbar-collapse justify-content-end" id="navbar">
          <ul class="navbar-nav">
            <li><a class="nav-link active" href="index.html#home">Home</a></li>
            <li><a class="nav-link" href="index.html#about">About Us</a></li>
            <li><a class="nav-link" href="index.html#feature">Feature</a></li>
            <li><a class="nav-link" href="index.html#price">Price</a></li>           
            <li><a class="nav-link" href="index.html#blog">Blog</a></li>
            <li><a class="nav-link" href="index.html#freetrial">Free Trial</a></li>
          </ul>
        </div>
        <!-- / -->

      </div><!-- Container -->
    </nav> <!-- Navbar -->
  </header>
  <!-- Header End -->


  <!-- Main Start -->
  <main>

    <!-- Home Banner Start -->
    <section id="home" class="home-banner-01">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-12 col-lg-8 text-center m-80px-t">
            <div class="m-80px-t sm-m-20px-t home-banner-text">
              <h1 class="font-alt">Build customer relationships through conversation</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div> <!-- home-text-center -->
          </div> <!-- col -->

          <div class="col-12 text-center">
            <div class="home-right">
              <img src="static/img/home-banner-2.png" title="" alt="">
            </div>
          </div>
        </div>
      </div><!-- container -->
    </section>
    <!-- / -->

    <!-- about Start -->
    <section id="about" class="section gray-bg border-bottom">
      <div class="container">
        <div class="row justify-content-center m-20px-b sm-m-5px-b">
          <div class="col-12 col-md-10 col-lg-7">
            <div class="section-title text-center">
              <h2 class="font-alt">Features designed for you</h2>
              <div class="title-border"><span class="lg"></span><span class="md"></span><span class="sm"></span></div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
          </div>
        </div> <!-- row -->

        <div class="row">
          <div class="col-12 col-md-6 col-lg-3 m-30px-t">
            <div class="feature-box-02">
              <i class="icon ti-check-box"></i>
              <div class="feature-content">
                <h5>Instant Setup</h5>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod.</p>
              </div>
            </div> <!-- feature-box-02 -->
          </div> <!-- col -->

          <div class="col-12 col-md-6 col-lg-3 m-30px-t">
            <div class="feature-box-02">
              <i class="icon ti-rocket"></i>
              <div class="feature-content">
                <h5>Fast Loading</h5>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod.</p>
              </div>
            </div> <!-- feature-box-02 -->
          </div> <!-- col -->

          <div class="col-12 col-md-6 col-lg-3 m-30px-t">
            <div class="feature-box-02">
              <i class="icon ti-headphone"></i>
              <div class="feature-content">
                <h5>Best Support</h5>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod.</p>
              </div>
            </div> <!-- feature-box-02 -->
          </div> <!-- col -->

          <div class="col-12 col-md-6 col-lg-3 m-30px-t">
            <div class="feature-box-02">
              <i class="icon ti-flag-alt"></i>
              <div class="feature-content">
                <h5>Affordable Price</h5>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod.</p>
              </div>
            </div> <!-- feature-box-02 -->
          </div> <!-- col -->

        </div> <!-- row -->
      </div> <!-- container -->
    </section>
    <!-- / -->

    <!-- Feature -->
    <section id="feature" class="section gray-bg border-bottom">
      <div class="container">
        <div class="row align-items-center justify-content-center">
          <div class="col-md-5 sm-m-30px-b">
            <div class="feature-box-04">
              <div class="icon">
                <i class="ti-check-box"></i>
              </div>
              <h4 class="font-alt">Create Your interface</h4>
              <p>I design and develop services for customers of all sizes, specializing in creating stylish.</p>
              <ul class="fb4-list m-40px-b m-20px-t p-0px">
                <li>
                  <div class="fb4-icon">
                    <i class="ti-rocket"></i> Fast Loading
                  </div>
                  <p>I design and develop services for customers of all sizes.</p>
                </li>
                <li>
                  <div class="fb4-icon">
                    <i class="ti-headphone"></i> Best Support
                  </div>
                  <p>I design and develop services for customers of all sizes.</p>
                </li>
              </ul>
              <a href="index.html#" class="m-btn-t-dark">Get Start</a>
            </div>
          </div> <!-- col -->
          <div class="col-md-6 text-center">
            <img src="static/img/feature-03.png" title="" alt="">
          </div> <!-- col -->
        </div> <!-- row -->
      </div> <!-- container -->
    </section>
    <!-- / -->
    
    <!-- Feature -->
    <section class="section gray-bg border-bottom">
      <div class="container">
          <div class="row align-items-center justify-content-center">
            <div class="col-md-5 order-md-2 sm-m-30px-b">
              <div class="feature-box-04">
                <div class="icon">
                  <i class="ti-check-box"></i>
                </div>
                <h4 class="font-alt">Works everywhere you go</h4>
                <p>I design and develop services for customers of all sizes, specializing in creating stylish.</p>
                <ul class="fb4-list-type m-40px-b m-20px-t p-0px">
                  <li>
                    <i class="ti-control-forward"></i> Fast Loading
                  </li>
                  <li>
                    <i class="ti-control-forward"></i> Best Support
                  </li>
                  <li>
                    <i class="ti-control-forward"></i> Affordable Price
                  </li> 
                </ul>
                <a href="index.html#" class="m-btn-t-dark">Get Start</a>
              </div>
            </div> <!-- col -->

            <div class="col-md-6 text-center">
              <img src="static/img/feature-01.png" title="" alt="">
            </div> <!-- col -->
          </div> <!-- row -->
      </div>
    </section>
    <!-- / -->
    
    <!-- Feature -->
    <section class="section gray-bg border-bottom">
      <div class="container">
        <div class="row align-items-center justify-content-center">
          <div class="col-md-5 sm-m-30px-b">
            <div class="feature-box-04">
                <div class="icon">
                  <i class="ti-check-box"></i>
                </div>
                <h4 class="font-alt">Works everywhere you go</h4>
                <p class="m-40px-b">I design and develop services for customers of all sizes, specializing in creating stylish, modern websites, web services and online stores. My passion is to design digital user experiences through the bold interface.</p>
                <a href="index.html#" class="m-btn-t-dark">Get Start</a>
            </div>
          </div> <!-- col -->
          <div class="col-md-6 text-center">
            <img src="static/img/feature-04.png" title="" alt="">
          </div> <!-- col -->
        </div> <!-- row -->        
      </div>
    </section>
    <!-- / -->

    <!-- Price Table -->
    <section id="price" class="section gray-bg border-bottom">
      <div class="container">
        <div class="row justify-content-center m-30px-b sm-m-15px-b">
          <div class="col-12 col-md-10 col-lg-7">
            <div class="section-title text-center">
              <h2 class="font-alt">Pricing Panel</h2>
              <div class="title-border"><span class="lg"></span><span class="md"></span><span class="sm"></span></div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-6 col-lg-3 m-15px-tb">
            <div class="price-table-01">
              <div class="pt-head">
                <h4><span>$</span>0</h4>
                <p>Per Month</p>
              </div>
              <div class="pt-body">
                <ul>
                  <li><b>limited</b> Submissions</li>
                  <li class="pt-no"><b>mailchimp</b> integration</li>
                  <li class="pt-no"><b>Adwords</b> integration</li>
                </ul>
                <div class="pt-action">
                  <a href="index.html#" class="m-btn-t-dark">Order Now</a>
                </div>
              </div>
            </div>
          </div> <!-- col -->

          <div class="col-md-6 col-lg-3 m-15px-tb">
            <div class="price-table-01">
              <div class="pt-head">
                <h4><span>$</span>49</h4>
                <p>Per Month</p>
              </div>
              <div class="pt-body">
                <ul>
                  <li><b>Unlimited</b> Submissions</li>
                  <li><b>mailchimp</b> integration</li>
                  <li class="pt-no"><b>Adwords</b> integration</li>
                </ul>
                <div class="pt-action">
                  <a href="index.html#" class="m-btn-t-dark">Order Now</a>
                </div>
              </div>
            </div>
          </div> <!-- col -->

          <div class="col-md-6 col-lg-3 m-15px-tb">
            <div class="price-table-01">
              <div class="pt-head">
                <h4><span>$</span>99</h4>
                <p>Per Month</p>
              </div>
              <div class="pt-body">
                <ul>
                  <li><b>Unlimited</b> Submissions</li>
                  <li><b>mailchimp</b> integration</li>
                  <li class="pt-no"><b>Adwords</b> integration</li>
                </ul>
                <div class="pt-action">
                  <a href="index.html#" class="m-btn-t-dark">Order Now</a>
                </div>
              </div>
            </div>
          </div> <!-- col -->

          <div class="col-md-6 col-lg-3 m-15px-tb">
            <div class="price-table-01">
              <div class="pt-head">
                <h4><span>$</span>120</h4>
                <p>Per Month</p>
              </div>
              <div class="pt-body">
                <ul>
                  <li><b>Unlimited</b> Submissions</li>
                  <li><b>mailchimp</b> integration</li>
                  <li><b>Adwords</b> integration</li>
                </ul>
                <div class="pt-action">
                  <a href="index.html#" class="m-btn-t-dark">Order Now</a>
                </div>
              </div>
            </div>
          </div> <!-- col -->
        </div> <!-- row -->

      </div>
    </section>
    <!-- / -->

    <!-- Testimonial -->
    <section class="section testimonial-section gray-bg border-bottom">
      <div class="container">
        <div class="row justify-content-center m-30px-b sm-m-15px-b">
          <div class="col-12 col-md-10 col-lg-7">
            <div class="section-title text-center">
              <h2 class="font-alt">What People Say?</h2>
              <div class="title-border"><span class="lg"></span><span class="md"></span><span class="sm"></span></div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
          </div>
        </div>

        <div class="row justify-content-center">
          <div class="col-md-12">
              <div id="client-slider-single" class="owl-carousel">
                <div class="testimonial-col-01">
                    <div class="user">
                      <div class="img">
                        <img src="static/img/avtar1.jpg" alt="" title="" />
                      </div>
                      <div class="name">
                        <span>Jennifer Lutheran</span>
                        <label>CEO at ZTIO.NET</label>
                      </div>
                    </div>
                    <div class="say">
                      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                    </div>
                </div> <!-- col -->

                <div class="testimonial-col-01">
                    <div class="user">
                      <div class="img">
                        <img src="static/img/avtar1.jpg" alt="" title="" />
                      </div>
                      <div class="name">
                        <span>Jennifer Lutheran</span>
                        <label>CEO at ZTIO.NET</label>
                      </div>
                    </div>
                    <div class="say">
                      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                    </div>
                </div> <!-- col -->

                <div class="testimonial-col-01">
                    <div class="user">
                      <div class="img">
                        <img src="static/img/avtar1.jpg" alt="" title="" />
                      </div>
                      <div class="name">
                        <span>Jennifer Lutheran</span>
                        <label>CEO at ZTIO.NET</label>
                      </div>
                    </div>
                    <div class="say">
                      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                    </div>
                </div> <!-- col -->

                <div class="testimonial-col-01">
                    <div class="user">
                      <div class="img">
                        <img src="static/img/avtar1.jpg" alt="" title="" />
                      </div>
                      <div class="name">
                        <span>Jennifer Lutheran</span>
                        <label>CEO at ZTIO.NET</label>
                      </div>
                    </div>
                    <div class="say">
                      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                    </div>
                </div> <!-- col -->

                <div class="testimonial-col-01">
                    <div class="user">
                      <div class="img">
                        <img src="static/img/avtar1.jpg" alt="" title="" />
                      </div>
                      <div class="name">
                        <span>Jennifer Lutheran</span>
                        <label>CEO at ZTIO.NET</label>
                      </div>
                    </div>
                    <div class="say">
                      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                    </div>
                </div> <!-- col -->

                <div class="testimonial-col-01">
                    <div class="user">
                      <div class="img">
                        <img src="static/img/avtar1.jpg" alt="" title="" />
                      </div>
                      <div class="name">
                        <span>Jennifer Lutheran</span>
                        <label>CEO at ZTIO.NET</label>
                      </div>
                    </div>
                    <div class="say">
                      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                    </div>
                </div> <!-- col -->

              </div> <!-- owl -->
          </div> <!-- col -->
        </div> <!-- row -->

      </div> <!-- container -->
    </section>
    <!-- / -->

    <!-- Blog Start -->
    <section id="blog" class="section blog-section gray-bg border-bottom">
      <div class="container">

        <div class="row justify-content-center m-45px-b sm-m-15px-b">
          <div class="col-12 col-md-10 col-lg-7">
            <div class="section-title text-center">
              <h2 class="font-alt">Latest News</h2>
              <div class="title-border"><span class="lg"></span><span class="md"></span><span class="sm"></span></div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-12 col-md-6 col-lg-4">
            <div class="blog-item md-m-15px-tb">
              <a href="index.html#">
                <img src="static/img/blog-img2.jpg" title="" alt="">
              </a>
              <div class="blog-content">
                <div class="post-meta">
                  By <a href="index.html">John Doe</a> <span>03.02.2018</span>
                </div><!-- /post-meta -->

                <h4 class="font-alt"><a class="theme-color" href="index.html#">Lorem ipsum dolor sit amet.</a></h4>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua.
                </p>
                
              </div><!-- /blog-content -->
            </div> <!-- Blog Item -->
          </div>
          <div class="col-12 col-md-6 col-lg-4">
            <div class="blog-item md-m-15px-tb">
              <a href="index.html#">
                <img src="static/img/blog-img3.jpg" title="" alt="">
              </a>
              <div class="blog-content">
                <div class="post-meta">
                  By <a href="index.html">John Doe</a> <span>03.02.2018</span>
                </div><!-- /post-meta -->

                <h4 class="font-alt"><a class="theme-color" href="index.html#">Lorem ipsum dolor sit amet.</a></h4>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua.
                </p>
                
              </div><!-- /blog-content -->
            </div> <!-- Blog Item -->
          </div>

          <div class="col-12 col-md-12 col-lg-4">
            <div class="blog-item md-m-15px-tb">
              <a href="index.html#">
                <img src="static/img/blog-img4.jpg" title="" alt="">
              </a>
              <div class="blog-content">
                <div class="post-meta">
                  By <a href="index.html">John Doe</a> <span>03.02.2018</span>
                </div><!-- /post-meta -->

                <h4 class="font-alt"><a class="theme-color" href="index.html#">Lorem ipsum dolor sit amet.</a></h4>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua.
                </p>
                
              </div><!-- /blog-content -->
            </div> <!-- Blog Item -->
          </div>

        </div>
      </div> <!-- container -->
    </section>
    <!-- / -->

    <!-- Subsribe -->
    <section id="freetrial" class="section subscribe-section gray-bg border-bottom">
      <div class="container">
        <div class="row justify-content-center m-30px-b">
          <div class="col-12 col-md-10 col-lg-7">
            <div class="section-title text-center">
              <h2 class="font-alt">Want To Get Started?</h2>
              <div class="title-border"><span class="lg"></span><span class="md"></span><span class="sm"></span></div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
          </div>
        </div>

        <div class="row justify-content-center">
          <div class="col-md-10 col-lg-7 text-center">
            <div class="subscribe-form">
              <div class="sf-form">
                <input type="email" class="input-control" placeholder="Add Your Email Id" name="Email">
                <button class="m-btn-dark">Get Started</button>
              </div>
            </div>
          </div> <!-- col -->
        </div> <!-- row -->
      </div> <!-- container -->
    </section>
    <!-- / -->
    
  </main>
  <!-- Main End -->

  <!-- Footer-->
  <footer class="footer-01">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-md-8">
          <ul class="d-flex nav justify-content-center justify-content-md-start">
            <li class="nav-item"><a class="nav-link" href="index.html#">About</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html#">Blog</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html#">Policy</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html#">Contact</a></li>
          </ul>
        </div>
        <div class="col-md-4">
          <p>All © Copyright by . All Rights Reserved.</p>
        </div>
      </div>
    </div>
  </footer>

  <!-- jQuery -->
  <script src="static/js/jquery-3.2.1.min.js"></script>
  <script src="static/js/jquery-migrate-3.0.0.min.js"></script>

  <!-- Plugins -->
  <script src="static/plugin/bootstrap/js/popper.min.js"></script>
  <script src="static/plugin/bootstrap/js/bootstrap.min.js"></script>
  <script src="static/plugin/owl-carousel/js/owl.carousel.min.js"></script>
  <script src="static/plugin/magnific/jquery.magnific-popup.min.js"></script>
  <!-- custom -->
  <script src="static/js/custom.js"></script>
</body>
<!-- Body End -->

</html>